---
title: Elevation
description: Use shadows to bring the content closer to users
redirect_from:
  - /foundation/elevation-hierarchy/
---

import ElevationLevel from "../../components/ElevationLevel";

We have seven main elevation levels:

1.  Suppressed
2.  Flat
3.  Level 1
4.  Level 2
5.  Level 3
6.  Level 4
7.  Fixed

Elevations represent levels of importance differently according to specific components.

Elevation levels with higher numbers are usually visually closer to the user
and have typically larger and more spread shadow.

| Visual style                            | Elevation levels                                                                                                                                                                                                                                                                                                                                                    | Token                                                  |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| <ElevationLevel level="suppressed" />   | **Suppressed (Level 1)** <br />This level should be used for cases where you want to suppress content that isn’t so important or draw attention to components (such as Tiles) that should have better visibility on a Cloud background.<br />Usage:<br />Suppressed [Modal section](/components/overlay/modal/)                                                     | none                                                   |
| <ElevationLevel level="flat" />         | **Flat (Level 2)** <br />This level is used for elements on a suppressed or white background. These elements have no action, so the level has a 1 px border instead of an actionable shadow.<br />Usage:<br />[Card](/components/structure/card/)                                                                                                                   | none                                                   |
| <ElevationLevel level={1} />            | **Level 1** <br />This level is applied to elements that are actionable so it’s visually clear that you can click on the element.<br />Usage:<br />[Tile](/components/structure/tile/)                                                                                                                                                                              | <InlineToken name="elevationLevel1BoxShadow" />        |
| <ElevationLevel level={2} />            | **Level 2** <br />This level is applied to actionable elements after interacting with them but not taking the action (such as hovering).<br />Usage:<br />[Tile](/components/structure/tile/) on hover/active                                                                                                                                                       | <InlineToken name="elevationLevel2BoxShadow" />        |
| <ElevationLevel level={3} />            | **Level 3** <br />This level is used on components that need attention. The shadow raises the component and users can spot that the element has greater importance because it seems to be visually closer to them.<br />Usage:<br />[Drawer](/components/overlay/drawer/)<br />[Popover](/components/overlay/popover/)<br />[Tooltip](/components/overlay/tooltip/) | <InlineToken name="elevationLevel3BoxShadow" />        |
| <ElevationLevel level="3Reverse" />     | **Level 3 reverse** <br />This level is applied to elements that are like those in Raised but are stuck to the bottom of the page.<br />Usage:<br /> [Popover](/components/overlay/popover/) on mobile<br />[Tooltip](/components/overlay/tooltip/) on mobile                                                                                                       | <InlineToken name="elevationLevel3ReverseBoxShadow" /> |
| <ElevationLevel level={4} />            | **Level 4** <br />This level is used basically only in connection with the Modal component, which also has a background overlay with opacity. The elevation communicates to users that they should focus on only one element.<br />Usage:<br />[Modal](/components/overlay/modal/)                                                                                  | <InlineToken name="elevationLevel4BoxShadow" />        |
| <ElevationLevel level="fixed" />        | **Fixed (Level 4)** <br />This level is applied only to elements that are fixed in position at the top while the page is scrolled.<br />Usage:<br />Fixed header in [Modal](/components/overlay/modal/)                                                                                                                                                             | <InlineToken name="elevationFixedBoxShadow" />         |
| <ElevationLevel level="fixedReverse" /> | **Fixed reverse (Level 4)** <br />This level is applied only to elements that are fixed in position at the bottom while the page is scrolled.<br />Usage:<br />Fixed footer in [Modal](/components/overlay/modal/)                                                                                                                                                  | <InlineToken name="elevationFixedReverseBoxShadow" />  |
| <ElevationLevel level="navBar" />       | **Nav Bar** <br />This level is applied on navigation bars.<br />Usage:<br />[NavigationBar](/components/navigation/navigationbar/)                                                                                                                                                                                                                                 | <InlineToken name="elevationNavBarBoxShadow" />        |
